{%extends "base.html"%}
{%block title%}
比赛列表
{%endblock%}
{%block body%}
<script>
    let contests;
    $(document).ready(() => {
        //这个东西不在vue里
        $("#add-contest-button").click(() => {
            $.post("/api/contest/create").done(ctx => {
                ctx = JSON.parse(ctx);
                if (ctx.code) {
                    showErrorModal(ctx.message);
                    return;
                }
                window.location.href = "/contest/" + ctx.contest_id;
            });
        })
        let currentPage = parseInt(window.location.href.split("/").pop());

        contests = new Vue({
            delimiters: ['{[', ']}'],
            el: "#contests",
            data: {
                data: null,
                done: false,
                currentPage: currentPage,
                redirect(v) {
                    window.location.href = "/contests/" + v;
                }
            }, methods: {
                makeTime(timestamp) {
                    return String(new Date(timestamp).toLocaleString());
                }, running(begin, end) {
                    let current = (new Date()).getTime() / 1000;
                    return current >= begin && current <= end;

                }
            }
        });

        axios.post("/api/contest/list", { page: currentPage }).then(ctx => {
            ctx = ctx.data;
            if (ctx.code) {
                showErrorModal(ctx.message);
                return;
            }
            contests.data = ctx.data;
            contests.done = true;
        });
    });
</script>

<div class="ui header" style="margin-bottom: 50px;">
    <h1>比赛列表</h1>
</div>
<div class="ui stacked segment">
    <div class="ui right aligned container" id="add-contest-button">
        <div class="ui green icon button">
            <i class="ui plus icon"></i>添加比赛..
        </div>
    </div>
    <div id="contests" v-if="done">
        <div class="ui divider"></div>
        <table class="ui very basic table">
            <thead>
                <tr>
                    <th class="center aligned">比赛名</th>
                    <th class="center aligned">创建者</th>
                    <th class="center aligned">开始时间</th>
                    <th class="center aligned">结束时间</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="contest,i in data.list"
                    v-bind:class="{positive:running(contest.start_time,contest.end_time  )}">
                    <td class="center aligned"><a :href="'/contest/'+contest.id">{[contest.id]}. {[contest.name]}</a>
                    </td>
                    <td class="center aligned"><a :href="'/profile/'+contest.owner_id">{[contest.owner_username]}</a>
                    </td>
                    <td class="center aligned">{[makeTime(contest.start_time*1000)]}</td>
                    <td class="center aligned">{[makeTime(contest.end_time*1000)]}</td>
                </tr>
            </tbody>
        </table>
        <page-menu v-bind:page-count="data.page_count" v-bind:callback="redirect" v-bind:current-page="currentPage">
        </page-menu>
    </div>
</div>

{%endblock%}